<template>
  <div class="vs-table-box" v-loading="loading">
    <div class="flex">
      <div style="width: 50%">
        <h3>会员性别</h3>
        <div
          id="main"
          style="min-width: 440px; width: 60%; height: 220px"
        ></div>
      </div>
      <div style="width: 50%">
        <h3>会员状态</h3>
        <div
          id="main2"
          style="min-width: 440px; width: 60%; height: 220px"
        ></div>
      </div>
    </div>
    <div class="flex">
      <div style="width: 50%">
        <h3>会员等级数量</h3>
        <div
          id="main3"
          style="min-width: 440px; width: 60%; height: 260px"
        ></div>
      </div>
      <div style="width: 50%">
        <h3>会员消费记录排行</h3>
        <el-form ref="form" :model="form" label-width="130px" style="display: flex">
          <el-form-item label="会员姓名：">
            <el-input
              v-model="form.username"
              style="width: 200px"
              @input="serchList()"
            ></el-input>
          </el-form-item>
          <el-form-item label="会员手机号：">
            <el-input
              v-model="form.phone"
              style="width: 200px"
              @input="serchList()"
            ></el-input>
          </el-form-item>
        </el-form>
        <el-table
          v-loading="loading"
          :data="tableData"
          header-row-class-name="has-gutter-table"
          style="width: 100%"
        >
          <el-table-column
            prop="username"
            label="姓名"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="phone"
            label="手机号"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="consume_sum"
            label="总消费金额（元）"
            align="center"
          >
          </el-table-column>
          <el-table-column prop="time" label="最近一次消费时间" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.orders[0].pay_time }}</span>
            </template>
          </el-table-column>
          <el-table-column label="消费名次" align="center">
            <template slot-scope="scope">
              <span>{{ scope.$index + 1 }}</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      model: "-1",
      radio1: "项目1",
      time: "",
      input: "",
      value1: "",
      form: {
        username: "",
        phone: "",
      },
      tableData: [],
      loading: false,
      details: {},
      timer:"",
    };
  },
  created() {},
  mounted() {
    this.getLicenseList();
  },
  methods: {
    //   筛选
    async serchList() {
      if (this.timer) {
        clearTimeout(this.timer);
      }
      this.timer = setTimeout(async () => {
        let { code, data } = await this.$Http.getUserSummary(this.form);
        if (code) {
          this.tableData = data.consume;
        }
      }, 1000);
    },
    async drawEcharts() {
      var echarts = require("echarts");
      // if (myChart != null && myChart != "" && myChart != undefined) {
      //     myChart.dispose();
      // }
      //基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById("main"));
      // 绘制图表
      myChart.setOption({
        tooltip: {
          trigger: "item",
        },
        xAxis: {
          type: "value",
          show: false,
        },
        yAxis: {
          type: "category",
          data: ["女", "男"],
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
        },
        series: [
          {
            data: [
              {
                value: this.details.woman,
                name: "女",
                itemStyle: { color: "rgba(236, 128, 141, 1)" },
              },
              {
                value: this.details.man,
                name: "男",
                itemStyle: { color: "rgba(129, 211, 248, 1)" },
              },
            ],
            type: "bar",
            label: {
              show: true,
              position: "right",
              formatter: "{c}人",
            },
            barWidth: 30,
          },
        ],
      });
      var myChart2 = echarts.init(document.getElementById("main2"));
      // 绘制图表
      myChart2.setOption({
        tooltip: {
          trigger: "item",
        },
        xAxis: {
          type: "value",
          show: false,
        },
        yAxis: {
          type: "category",
          data: ["正常", "待激活"],
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
        },

        series: [
          {
            data: [
              {
                value: this.details.normal,
                name: "正常",
                itemStyle: { color: "rgba(2, 125, 180, 1)" },
              },
              {
                value: this.details.activation,
                name: "待激活",
                itemStyle: { color: "rgba(128, 255, 255, 1)" },
              },
            ],
            type: "bar",
            label: {
              show: true,
              position: "right",
              formatter: "{c}人",
            },
            barWidth: 30,
          },
        ],
      });
      var myChart3 = echarts.init(document.getElementById("main3"));
      // 绘制图表
      myChart3.setOption({
        tooltip: {
          trigger: "item",
        },
        xAxis: {
          type: "value",
          show: false,
        },
        yAxis: {
          type: "category",
          data: this.details.level1,
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
        },
        series: [
          {
            data: this.details.level,
            type: "bar",
            label: {
              show: true,
              position: "right",
              formatter: "{c}人",
            },
            barWidth: 30,
          },
        ],
      });
    },
    async getLicenseList() {
      this.loading = true;
      let { code, data } = await this.$Http.getUserSummary();
      if (code) {
        let arr = [];
        let arr1 = [];
        this.tableData = data.consume;
        data.vip_level.forEach((ele) => {
          let obj = {
            value: ele.user_count,
          };
          arr.push(obj);
          arr1.push(ele.price);
        });
        data.level = arr;
        data.level1 = arr1;
        this.details = data;
        this.$nextTick(() => {
          this.drawEcharts();
        });
      }
      this.loading = false;
    },
  },
};
</script>

<style lang="scss" scoped>
</style>